<template>
    <div class="page-content">
                 <div class="no">
                     <span class="head">头像</span>
                     <!-- <img class="avatar" :src="form.profilePhoto" v-if="jaju"> -->
                     <el-avatar :size="100" :src="form.profilePhoto"  class="avatar" fit="fill"><i :v-if="form.imageUrl === ''" class="el-icon-user-solid"></i></el-avatar>
                 <el-upload
                    class="avatar-uploader"
                    action="http://120.77.156.205:9610/file/upload/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <el-button @click="Open" class="uploadAvatar">
                   上传头像
                 </el-button>
                </el-upload>
  
                  </div>
                 
                
                  <el-form
                    :inline="false"
                     label-width="60px"
                    :model="form"
                    :rules="rules"
                    >
                     <el-form-item
                    label-width="90px"
                    label="公司"
                    prop="enterprise"
                    >
                     <el-input
                        v-model="form.enterprise"
                        placeholder="请输入用户名"
                        style="font-size:14px;"
                        :disabled="true"
                    ></el-input>
                 </el-form-item>
                   <el-form-item
                   label-width="90px"
                   label="性别"
                   >
                       <el-select v-model="form.sex" placeholder="请选择" :disabled="title === '点击修改'">
                            <el-option
                            v-for="item in sexarr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                   </el-form-item>
                    <el-form-item
                    label-width="90px"
                    label="用户名"
                    prop="userName"
                    >
                     <el-input
                        v-model="form.username"
                        placeholder="请输入用户名"
                        prefix-icon="el-icon-user"
                        style="font-size:14px;"
                        :disabled="title === '点击修改'"
                    ></el-input>
                 </el-form-item>
                 <el-form-item
                    label="电话"
                   label-width="90px"
                   prop="phone"
                    >
                     <el-input
                        v-model="form.phone"
                        placeholder="请输入手机号码"
                        prefix-icon="el-icon-mobile-phone"
                        style="font-size:14px;"
                        disabled
                    ></el-input>
                 </el-form-item>    
                <el-form-item
                    label="生日"
                   label-width="90px"
                   inline="true" 
                    >
                    <el-date-picker
                    :disabled="title === '点击修改'"
                    v-model="form.birthday"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                    </el-date-picker>
                 </el-form-item>   
                  <el-form-item size="large">
     <el-button :type="buttonType" @click="onSubmit">{{title}}</el-button>
    <el-button :type="buttonType" @click="gosource">溯源</el-button>
  </el-form-item>     
        </el-form>
    
    </div>
</template>

<script>
import UploadFile from "../../components/Login/UploadFile"
import {gethead,Submituserinfo} from "../../Api/login"
export default {
    name: 'PersonalCenter',
    data() {
        return {
            buttonType:"primary",
            title:"点击修改",
            rules:{
                    // 用户名
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 手机
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          // {
          //   len: 11,
          //   pattern: /1\d{10}/,
          //   message: "号码必须以1开头且长度是11位",
          // },
        ],
            },
            jaju:"true",
            form:{
                username:"1",
                sex:"1",
                phone:"1",
                birthday:"1",
                imageUrl:""
            },
            sexarr:[{label:"男",value:1},{label:"女",value:0}],
            
        }
    },
    methods:{
        gosource(){
            this.$router.push("/index")
        },
        Open(){
            if(this.title =="点击修改"){
            this.title = "点击保存"
            this.buttonType = "success"
           }
        },
        //头像修改成功回调
         handleAvatarSuccess(res, file) {
             console.log(res)
             console.log(file)
        this.form.profilePhoto = JSON.parse(res.data).url
        console.log(JSON.parse(res.data).url)
        console.log(this.form.profilePhoto)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 5;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPG && isLt2M;
      },
   
        async getheadl(){
            const {data : res} = await gethead()
            console.log("用户信息",res)
            if(res.statusCode == 20000){
                this.form = res.data
                console.log("mmmmmm",this.form)
            }
            else{
                this.$message.error("用户信息获取失败！")
            }
        },
        async onModify(){
            this.form.birthday = this.form.birthday+" 00:00:00"
            let {username,sex,phone,birthday,profilePhoto} = this.form
            console.log(this.form)
            const {data :res} = await Submituserinfo({username,sex,phone,birthday,profilePhoto})
            console.log(res)
            if(res.statusCode == 20000){
                this.$message.success(res.message)
            }else{
                this.$message.error(res.message);
            }
        },
        onSubmit(){
        if(this.title =="点击修改"){
            console.log("2222")
            this.title = "点击保存"
            this.buttonType = "success"
        }else{
            console.log("3333")
            this.onModify()
            this.title = "点击修改"
            this.buttonType = "primary"
        }
    },
    },
    created(){
        this.getheadl();
    },
    components:{
       UploadFile,
    },
    
}
</script>
<style scoped lang="sass">
.no{
    padding: 20px 0 40px 0;
     display:flex;
    justify-content:left; 
    align-items:center; 
    
}
.el-form .el-form-item .el-input {
  width: 400px;
}
.head{
    font-size:20px;
    margin:0 20px 0 20px
}
.avatar{
    margin:0 35px 0 0;
//   width: 95px;
//   height: 95px;
//   border-radius: 50%;
}
/deep/{.picker{
     .el-input__inner{
    width: 120px; 
  } 
}}

</style>